<template>
  <div class="search">
    <van-nav-bar
      title="搜索"
      left-arrow
      @click-left="
        $router.push({
          path: '/index',
          query: { geohash: geohash },
        })
      "
    />
    <van-search
      background="#fff"
      v-model="keyword"
      show-action
      placeholder="请输入搜索商家或美食"
      @search="onSearch"
    >
      <template #action>
        <van-button type="info" @click="submit">提交</van-button>
      </template>
    </van-search>
    <div
      class="title"
      v-html="bool ? (historyList.length > 0 ? '历史记录' : '') : '商店'"
      v-show="titleShow"
    ></div>
    <div class="history" v-if="bool">
      <van-cell
        :title="item"
        v-for="(item, index) in historyList"
        :key="index"
        @click="itemSearch(item)"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="cross" @click="delFn(item)" />
        </template>
      </van-cell>
      <van-cell
        value="清空搜索历史"
        @click="clearFn"
        v-show="historyList.length != 0"
      />
    </div>
    <div class="list" v-else>
      <van-loading
        size="100px"
        vertical
        v-show="!nodata && dataList.length == 0"
        >加载中...</van-loading
      >
      <router-link
        :to="{
          path: '/shopList/goods-detail',
          query: {
            restaurant_id: item.id,
          },
        }"
        v-for="item in dataList"
        :key="item.id"
      >
        <div class="img">
          <img :src="item.image_path | joinPath" alt="" />
        </div>
        <div class="content">
          <div>
            {{ item.name }}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
              width="24"
              height="12"
            >
              <polygon
                points="0,14 4,0 24,0 20,14"
                style="fill: none; stroke: rgb(255, 96, 0); stroke-width: 1"
              ></polygon>
              <line
                style="stroke: rgb(255, 96, 0); stroke-width: 1.5"
                x1="1.5"
                y1="12"
                x2="20"
                y2="12"
              ></line>
              <text
                style="fill: rgb(255, 96, 0); font-size: 9px; font-weight: bold"
                x="3.5"
                y="9"
              >
                支付
              </text>
            </svg>
          </div>
          <div>
            月售 <span>{{ item.recent_order_num }}</span> 单<br />
            <span>{{ item.float_minimum_order_amount }}</span> 元起送 /
            距离<span>{{ item.distance }}</span>
          </div>
        </div>
      </router-link>
      <van-cell class="noData" title="很抱歉 ! 无搜索结果" v-show="nodata" />
    </div>
    <!-- 底部 -->
    <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from "@/components/footer.vue";
import { getRestaurant } from "@/api/search";
export default {
  components: {
    footerNav,
  },
  data() {
    return {
      keyword: "",
      geohash: "",
      historyList: [],
      dataList: [],
      bool: true,
      nodata: false,
      titleShow: true,
      geohash: this.$route.query.geohash,
    };
  },

  // 监听keyword
  watch: {
    keyword: {
      handler() {
        if (this.keyword.trim() == "") {
          this.nodata = false; //不显示无结果
          this.titleShow = true; //显示title
          this.bool = true; //如果没有keyword,title文本显示历史记录或空
        }
      },
    },
  },

  created() {
    // 如果存在数据,渲染历史记录
    if (localStorage.getItem("elm-histroy-67")) {
      this.historyList = JSON.parse(localStorage.getItem("elm-histroy-67"));
    }
  },

  methods: {
    // 点击历史记录搜索
    itemSearch(item) {
      if (event.target.className != "van-icon van-icon-cross") {
        this.keyword = item;
        this.searchData();
      }
    },
    //键盘搜索
    onSearch() {
      this.searchData();
    },

    // 点击提交搜索
    submit() {
      this.searchData();
    },

    // 搜索数据封装函数
    searchData() {
      // 获取焦点
      document.querySelector("input").focus();
      this.dataList = [];
      if (this.keyword.trim() == "") {
        return;
      } else {
        this.bool = false; //如果有keyword,title文本显示商店
        this.geohash = this.$route.query.geohash;
        getRestaurant(this.geohash, this.keyword.trim()).then((res) => {
          console.log(res);
          if (res.data.message == "搜索餐馆数据失败" || res.data.length == 0) {
            this.nodata = true; //没有res数据,显示无结果
            this.dataList = []; //datalist清空
            this.titleShow = !this.nodata; //无结果不显示title,有结果显示title
          } else {
            this.dataList = res.data;
            this.titleShow = true; //有res数据显示title
            console.log(174, this.dataList);
          }
          this.historyList.push(this.keyword.trim());
          // 去重
          this.historyList = [...new Set(this.historyList)];
          localStorage.setItem(
            "elm-histroy-67",
            JSON.stringify(this.historyList)
          );
        });
      }
    },

    // 删除该记录
    delFn(item) {
      this.historyList = this.historyList.filter((obj) => {
        return obj != item;
      });
      localStorage.setItem("elm-histroy-67", JSON.stringify(this.historyList));
      // console.log(this.historyList);
    },

    // 清除搜索历史
    clearFn() {
      localStorage.removeItem("elm-histroy-67");
      this.historyList = [];
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  background-color: #f5f5f5;
  height: 100vh;
  /deep/ .van-nav-bar {
    background-color: #3190e8;
    .van-nav-bar__arrow {
      color: #fff;
      font-size: 20px;
    }
    .van-ellipsis {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  }

  /deep/.van-search {
    background-color: #f2f2f2;
    .van-icon-search {
      display: none;
    }
    input {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
    }
  }
  .van-button {
    width: 80px;
    border-radius: 5px;
    height: 40px;
    font-size: 16px;
  }
  .title {
    padding: 13px;
    font-weight: bold;
    color: #666666;
    font-size: 15px;
  }
  .history {
    padding-bottom: 50px;
    div {
      padding: 10px;
      font-weight: bold;
      color: #666666;
      font-size: 16px;
    }
    .van-cell {
      margin-top: 1px;
      padding: 0;
      padding-right: 12px;
      .van-icon-cross {
        margin-top: 15px;
        font-weight: bold;
        color: #6666669c;
      }
    }

    .van-cell__value {
      height: 20px;
      text-align: center;
      color: #3190e8;
    }
  }

  .list {
    max-width: 1000px;
    min-width: 320px;
    a {
      color: #000;
      display: flex;
      height: 100px;
      padding: 12px;
      background-color: #fff;
      margin-bottom: 3px;
      font-size: 16px;
      .img {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        flex: 1;
        margin-left: 10px;
        line-height: 25px;
        height: 90px;
        border-bottom: 2px solid #cccccc54;
      }
    }
  }
  .noData {
    text-align: center;
    font-size: 16px;
  }
}
</style>